<template>
  <div class="register" :style="'background-image:url('+ Background +');'">
    <el-form ref="form" status-icon class="register-form" :model="form" :rules="rules">
      <div class="register-form-title">更改您的密码</div>
      <el-form-item label="密码" prop="pwd">
        <el-input type="password" v-model="form.pwd" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPwd">
        <el-input type="password" v-model="form.confirmPwd" placeholder="确认密码"></el-input>
      </el-form-item>
      <el-form-item class="register-btn">
        <el-button type="primary" @click="onSubmit" :disabled="btnDisabled">更改密码</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { encrypt } from '@/utils/rsaEncrypt'
import Background from '@/assets/images/background.png'
import { updatePwd } from '@/api/register'

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.form.confirmPwd !== '') {
          this.$refs.form.validateField('confirmPwd');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.pwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      Background: Background,
      btnDisabled: false,
      form: {
        pwd: '',
        confirmPwd: '',
        verifyCode: ''
      },
      rules: {
        pwd: [
          { validator: validatePass, trigger: 'blur' }
        ],
        confirmPwd: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      }
    }
  },
  created() {
    this.verifyCode = this.$route.query.verifyCode;
  },
  methods: {
    onSubmit() {
      this.btnDisabled = true;
      var params = {
        pwd: encrypt(this.form.pwd),
        confirmPwd: encrypt(this.form.confirmPwd),
        verifyCode: this.verifyCode
      };
      this.$refs['form'].validate((valid) => {
        if (valid) {
          updatePwd(params).then(response => {
            this.$notify({
              title: '密码修改成功',
              type: 'success',
              duration: 1500
            })
            //跳转登录页
            this.$router.push({ path: '/' })
          }).catch((response) => {
            this.btnDisabled = false;
          })
        } else {
          this.btnDisabled = false;
        }
      });
    }
  },
}
</script>

<style rel="stylesheet/scss" lang="scss">
.register {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-size: cover;
}

.register-form {
  border-radius: 6px;
  background: #fff;
  width: 470px;
  padding: 25px 25px 5px 25px;
}

.register-form .register-form-title {
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 40px;
  font-size: 24px;
  font-weight: bold;
  color: #707070;
}

.register-form .el-form-item__label {
  width: 80px;
}

.register-form .el-form-item__content {
  margin-left: 80px;
}

.register-form .register-btn {
  text-align: center;
}

.register-form .register-btn .el-form-item__content {
  margin-left: 0px;
}
</style>
